<template>
  <view v-if="payGoodsShow.length !==0">
    <view class="cart-title">
      交易成功 已付款
    </view>
    <view class="cart-container" v-if="payGoodsShow.length !==0">
      <!-- 订单列表区域 -->
      <view class="goodsOrder" v-for="(goodsOrder, i) in payGoodsShow" :key="i">
        <!-- 订单标题 -->
        <view class="goodOrder">
          <view class="order-title">
            <uni-icons type="shop" size="18"></uni-icons>
            <text class="order-title-text">牛牛专卖店 ></text>
            <text class="order-title-right">已付款</text>
          </view>
          <!-- 商品区域 -->
          <view class="goods" v-for="(goods, i1) in goodsOrder.goods" :key="i1" @click="goToGoodsDetail(goods)">
            <my-goods :goods="goods"></my-goods>
          </view>
          <!-- 价格区域 -->
          <view class="price">
            实付款 ￥
            <text> {{goodsOrder.order_price}}</text>
          </view>
        </view>

        <!-- 订单详情 -->
        <view class="OrderDetail">
          <view class="OrderDetail-title">
            订单详情
          </view>
          <view class="OrderDetail-text">
            收货信息： {{goodsOrder.consignee_addr}}
          </view>
          <view class="OrderDetail-text">
            订单编号： {{goodsOrder.order_number}}
          </view>
          <view class="OrderDetail-text">
            下单时间： {{goodsOrder.order_time}}
          </view>
        </view>
      </view>
      <!--结算区域 -->
    </view>
  </view>
  <view class="empty-cart" v-else>
    <image src="/static/cart_empty@2x.png" class="empty-img"></image>
    <text class="tip-text">空空如也~~</text>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapMutations
  } from 'vuex'
  import badgeMix from '@/mixins/tabbar-badge.js'
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {};
    },
    computed: {
      ...mapState('m_cart', ['payGoods']),
      ...mapGetters('m_cart', ['payGoodsShow'])
    },
    methods: {
      ...mapMutations('m_cart', ['addPayCart']),
      goToGoodsDetail(goods) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods.goods_id
        })
      },

    },
    mixins: [badgeMix]
  }
</script>

<style lang="scss">
  page {
    background-color: #f3f2f2;
  }

  .cart-title {
    height: 40px;
    line-height: 40px;
    width: 100%;
    font-size: 18px;
    padding-left: 5px;
    background-color: #fff;
    margin-bottom: 10px;
    text-align: center;
    color: #ffaa00;
    font-weight: 600;
  }

  .cart-container {
    padding: 0 20rpx;

    .goodsOrder {
      margin-bottom: 20px;
      padding: 5px;

      .goodOrder {
        overflow: hidden;
        background-color: #fff;
        border-radius: 10px;
        padding:  10px;

        .goods {
          
          background-color: #fff;
        }

        .order-title {
          display: flex;
          background-color: #fff;

          .order-title-text {
            margin-left: 10px;
          }

          .order-title-right {
            margin-right: 10px;
            color: #c00000;
          }
        }

        .price {
          padding: 10px 0;
          font-weight: 600;
          float: right;
          text {
            color: #ffaa00;
          }
        }
      }

      .OrderDetail {
        padding:  10px;
        margin-top: 30rpx;
        overflow: hidden;
        background-color: #fff;
        border-radius: 10px;

        .OrderDetail-title {
          font-weight: 600;
        }

        .OrderDetail-text {
          margin: 10px 0;
          white-space: nowrap;
          /* 不换行 */
          overflow: hidden;
          /* 溢出隐藏 */
          text-overflow: ellipsis;
          /* 溢出内容由省略号表示 */
        }
      }
    }
  }

  .empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 150px;

    .empty-img {
      width: 90px;
      height: 90px;
    }

    .tip-text {
      font-size: 12px;
      color: gray;
      margin-top: 15px;
    }
  }
</style>
